<template>
    <div id="categoryPie" style="width: 100%; height: 260px;"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue';

onMounted(() => { 
    initChart()
})
const initChart = () => {
    var myChart = echarts.init(document.getElementById('categoryPie'));
    let option = {
        title: {
            text: '类目数据表',
            subtext: '实时数据展示',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            left: 'center',
            top: 'bottom',
            data: ['新能源', '汽油车', 'suv', '轿车', '跑车', 'MPV', 'UMV', '摩托车']
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 90],
                center: ['55%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 30, name: '新能源' },
                    { value: 28, name: '汽油车' },
                    { value: 26, name: 'suv越野车' },
                    { value: 24, name: '轿车' },
                    { value: 22, name: '跑车' },
                    { value: 20, name: 'mpv商务车' },
                    { value: 18, name: '警务车' },
                    { value: 16, name: '摩托车' }
                ]
            }
        ]
    };

    myChart.setOption(option);

}

</script>

<style  scoped>

</style>